<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/classify.css">
</head>

<body>
    <div id="app">
        <!-- 分类页面 -->
        <header>
            <p style="background:white">全部分类</p>
            <div class="search">
                <a href="./search.html"><span class="iconfont icon-sousuokuang"></span> 搜索商品</a>
            </div>
        </header>

        <div class="main">
            <!-- 左侧 -->
            <div class="classify-items">
                <!-- <div class="item">
                <p>热门推荐</p>
            </div> -->
                <div class="item" v-for="(item,index) in left_item" :key="item.category_id" @click="dian(index)"
                    :class="{active:l===index}">
                    <p :data-id='item.category_id'>{{item.name}}</p>
                </div>
            </div>
            <!-- 右侧 -->
            <div class="goods-items">
                <!-- <div class="item-photo">
                <img src="" alt="">
                <p>das</p>
            </div> -->
                <div class="item-photo" v-for="item in right_item">
                    <img :src="item.image.preview_url" alt="">
                    <p>{{item.name}}</p>
                </div>
            </div>
        </div>
        <footer>
            <a href="./index.html">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
            <a href="#" class="active">
                <i class="iconfont icon-fenlei"></i>
                <p>分类</p>
            </a><a href="./shoppCars.html">
                <i class="iconfont icon-gouwuchekong"></i>
                <p>购物车</p>
            </a><a href="./home.html">
                <i class="iconfont icon-wode"></i>
                <p>我的</p>
            </a>
        </footer>
    </div>
</body>
<script src="./js/axios.js"></script>
<!-- <script src="./js/classify.js"></script> -->
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            l: 0,
            left_item: [],
            right_item: []
        },
        methods: {
            async fn() {
                const {
                    data: {
                        data
                    }
                } = await axios.get("http://cba.itlike.com/public/index.php?s=/api/category/list")
                console.log(data)
                this.left_item = data.list
                this.dian(0)

            },
            dian(index) {
                if (typeof index === 'number') {
                    this.right_item = this.left_item[index].children
                }
                this.l = index
            }
        },
        created() {
            this.fn()

        }
    })
</script>

</html>